<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="业务员" prop="salesId">
                            <ts-select v-if="form.employeeName" v-model="form.employeeId" :fileName="saleFileName" :template="tableProps" @updateRow="employeeChange"></ts-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="所在部门" prop="deptName">
                            <el-input v-model="form.deptName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="拜访类别" prop="visitObjectKind">
                            <el-select v-model="form.visitObjectKind" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.visitObjectKindList" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="系统提醒">
                            <el-checkbox style="width: 5%;" v-model="form.remind" true-label="1"
                                false-label="0"></el-checkbox>
                            提前<el-input style="width: 20%;" v-model="form.remindDays" type="number" :min="0"></el-input>天提醒
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="邮件提醒">
                            <el-checkbox style="width: 5%;" v-model="form.isSendEmail" true-label="1"
                                false-label="0"></el-checkbox>
                            提前<el-input style="width: 20%;" v-model="form.emailRemindDays" type="number"
                                :min="0"></el-input>天提醒
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="类型" prop="planType">
                            <el-select v-model="form.planType" clearable placeholder="请选择：">
                                <el-option v-for="item in configData.planTypeList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="预计费用" prop="forecastCost">
                            <el-input v-model="form.forecastCost"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-card style="margin-top: 20px;">
            <sc-title title="出差/来访对象"></sc-title>
            <el-scrollbar height="200px">
                <el-form-item prop="column">
                    <ts-form-table v-model="dataList" :addTemplate="dtl"  placeholder="暂无数据"
                        @updateIndex="updateIndex" @deleteAddData="deleteData">
                        <template #tableContent>
                            <el-table-column label="客户名称" width="250">
                                <template #default="scope">
                                    <ts-select v-if="dataList.length>0" v-model="scope.row.custId" :fileName="custFileName" :template="tableProps" @updateRow="custChange(scope.row, $event)" :label="scope.row.custName">
                                    </ts-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="custNumber" label="客户编号" width="200"></el-table-column>
                            <el-table-column prop="title" label="主题" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.title"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="custMan" label="联系人" width="200">
                                <template #default="scope">
                                    <el-select v-model="scope.row.custMan" allow-create filterable clearable
                                        placeholder="请选择：" @change="custManChange(scope.row, $event)"
                                        @blur="custBlur(scope.row, $event)">
                                        <el-option v-for="item in contactCustList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="custPhone" label="联系方式" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.custPhone"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="estimateStartDateTime" label="预计出发时间" width="200">
                                <template #default="scope">
                                    <el-date-picker style="width: 90%;" v-model="scope.row.estimateStartDateTime"
                                        type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="estimateBackDateTime" label="预计结束时间" width="200">
                                <template #default="scope">
                                    <el-date-picker style="width: 90%;" v-model="scope.row.estimateBackDateTime"
                                        type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="visitAddress" label="活动地址" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.visitAddress"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="forecastCost" label="预计费用" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.forecastCost" type="number"
                                        @change="costChange"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="同行人员" width="220">
                                <template #default="scope">
                                    <sc-table-select :inputWidth="185" v-model="scope.row.accompaniedList" multiple
                                        :apiObj="apiObj" :fileName="accompaniedByFileName" :table-width="700" collapseTags
                                        :props="tableProps" @change="accompaniedByChange(scope.row, $event)">
                                    </sc-table-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="planContent" label="出差事由" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.planContent"></el-input>
                                </template>
                            </el-table-column>
                        </template>
                    </ts-form-table>
                </el-form-item>
            </el-scrollbar>
        </el-card>
        <el-card style="margin-top: 20px;">
            <sc-title title="行程安排清单"></sc-title>
            <el-scrollbar height="200px">
                <el-form-item prop="column">
                    <ts-form-table v-model="dtlList" :addTemplate="schedule"  placeholder="暂无数据"
                        @updateIndex="updateIndex">
                        <template #tableContent>
                            <el-table-column prop="startDateTime" label="出发时间" width="200">
                                <template #default="scope">
                                    <el-date-picker style="width: 90%;" v-model="scope.row.startDateTime" type="datetime"
                                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="origo" label="起点" width="200">
                                <template #default="scope">
                                    <el-select v-model="scope.row.origo" allow-create filterable clearable
                                        placeholder="请选择：" @blur="origoBlur(scope.row, $event)">
                                        <el-option v-for="item in configData.cityList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="destn" label="终点" width="200">
                                <template #default="scope">
                                    <el-select v-model="scope.row.destn" allow-create filterable clearable
                                        placeholder="请选择：" @blur="destnBlur(scope.row, $event)">
                                        <el-option v-for="item in configData.cityList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="transport" label="交通工具" width="200">
                                <template #default="scope">
                                    <el-select v-model="scope.row.transport" allow-create filterable clearable
                                        placeholder="请选择：">
                                        <el-option v-for="item in configData.transportList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="custId" label="客户" width="200">
                                <template #default="scope">
                                    <el-select v-model="scope.row.custId" allow-create filterable clearable
                                        placeholder="请选择：" @focus="getcustArray" @change="custChange2(scope.row, $event)">
                                        <el-option v-for="item in custArray" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="同行人员" width="220">
                                <template #default="scope">
                                    <sc-table-select :inputWidth="185" v-model="scope.row.accompaniedList" multiple
                                        :apiObj="apiObj" :fileName="accompaniedByFileName" :table-width="700" collapseTags
                                        :props="tableProps" @change="accompaniedByChange2(scope.row, $event)">
                                    </sc-table-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="planContent" label="摘要" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.remark"></el-input>
                                </template>
                            </el-table-column>
                        </template>
                    </ts-form-table>
                </el-form-item>
            </el-scrollbar>
        </el-card>

        <div class="button-position" style="margin-top: 5px;">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button @click="update(formRef)" type="primary">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/trip'
import sysApi from '@/api/model/system'
import tsFormTable from '@/components/scFormTable/index.vue'
import tsSelect from '@/components/scSelect/index.vue'
import {deduplication} from'@/utils/arr.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
// 添加用户数据的对象
const form = ref({})
const configData = ref({})
const dataList = ref([])
const dtlList = ref([])
const formRef = ref()
const custArray = ref([])
const accompaniedArray = ref([])
const custFileName = ref('ChooseCustReport')
const accompaniedByFileName = ref('ChooseEmployeeReport')
const contactCustList = ref([])
const contactList = ref([])
const dtl = ref({
})
const schedule = ref({})
const tableProps = {
    label: 'name',
    value: 'id',
}
const apiObj = ref(sysApi.select.query)
const saleFileName = ref('ChooseEmployeeReport')
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" }
    ]
})
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.employeePlan.detail.post(props.paramsData)
    console.log(res)
    if (res.code == '200') {
        form.value = res.data
        configData.value = res.configData
        dataList.value = res.dataList
        dtlList.value = res.dtlList
        dtl.value = res.dtl
        schedule.value = res.schedule
    }

}
const updateIndex = () => {
    dataList.value.forEach((item, index) => {
        item.itemIndex = index + 1
    })
}
//删除新增数据后的预算计算
const deleteData = (row) => {
    if (row.forecastCost !== '') {
        form.value.forecastCost = form.value.forecastCost - Number(row.forecastCost)
    }
}
const employeeChange = (row) =>{
    form.value.deptName = row.deptName
}
/**
 *  选择或者输入客户id后带出其他数据
 * 
 * 
 */
const custChange = async (prop, val) => {
    prop.custId = val.id
    prop.custNumber = val.number
    prop.custName = val.name
    prop.visitAddress = val.corpAddress
    getContact(val)
}
const getContact = async (val) => {
    let params = {
        id: val.id
    }
    let res = await Api.employeePlan.cust.post(params)
    contactList.value = res.dataList
    contactCustList.value = []
    res.dataList.forEach(element => {
        let parms = {
            value: element.contactMan,
            label: element.contactMan
        }
        contactCustList.value.push(parms)
    });
}
//选择客户后带出陪同人员
const custChange2 = (row, val) => {
    accompaniedArray.value.forEach((item) => {
        if (item.id = val) {
            row.accompaniedList= item.value
        }
    })
    let arrId = []
    let arrName = []
    row.accompaniedList.forEach(item => arrId.push(item.id))
    row.accompaniedList.forEach(item => arrName.push(item.name))
    row.accompaniedByIdArray = arrId
    row.accompaniedByArray = arrName

}
//三个Blur代表select可输入
const custBlur = (prop, value) => {
    if (value.target.value) {
        prop.custMan = value.target.value
    }
}
const origoBlur = (prop, value) => {
    if (value.target.value) {
        prop.origo = value.target.value
    }
}
const destnBlur = (prop, value) => {
    if (value.target.value) {
        prop.destn = value.target.value
    }
}
//联系人选择后带出电话
const custManChange = (prop, val) => {
    let temp = contactList.value.find(ele => ele.contactMan = val)
    if (temp) {
        prop.custPhone = temp.phone
    }
}
const accompaniedByChange = (row, val) => {
    let arrId = []
    let arrName = []
    val.forEach(item => arrId.push(item.id))
    val.forEach(item => arrName.push(item.name))
    row.accompaniedByIdArray = arrId
    row.accompaniedByArray = arrName
}
const accompaniedByChange2 = (row, val) => {
    let arrId = []
    let arrName = []
    val.forEach(item => arrId.push(item.id))
    val.forEach(item => arrName.push(item.name))
    row.accompaniedByIdArray = arrId
    row.accompaniedByArray = arrName
}
//由出差对象列表的数据来对行程计划中的客户以及陪同人员初始化数据
const getcustArray = () => {
    let arr = []
    let arrRow = []
    dataList.value.forEach((item) => {
        if (item.custId !== '') {
            let params = {
                label: item.custName,
                value: item.custId
            }
                arr.push(params)
        }
        if (JSON.stringify(item.accompaniedArray) !== '[]' && item.custId !== '') {
            let params2 = {
                id: item.custId,
                value: JSON.parse(JSON.stringify(item.accompaniedList))
            }
                arrRow.push(params2)
        }
    })
    custArray.value = deduplication(arr,'value')
    accompaniedArray.value = deduplication(arrRow,'id')
}
const costChange = (val) => {
    let cost = 0
    dataList.value.forEach((item) => {
        cost = cost + Number(item.forecastCost)
    })
    form.value.forecastCost = cost
}
const updateVisible = (val) => {
    emit('updatetable')
}
const update= async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            updateData();
        }
    })
}
const updateData = async () => {
    let params = {
        bean: form.value,
        dataList: dataList.value,
        dtlList: dtlList.value
    }
    console.log(params)
    var res = await Api.employeePlan.update.post(params);
    console.log(res)
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable', true);
    }
}


</script>
<style lang="less" scoped></style>



